﻿<template>
  <div>
    <query-table id="analysis-tend" key="analysis" ref="analysis"
                  dataUrl="/project/analysis/tend"
                  :show-query="false"
                  :query-fields="[{id: 'beginYear', name: '开始年度',defaultValue:new Date().getFullYear()-4, component:{id:'year-picker',change:handleChangeBeginYear}, colSpan: 4},
                       {id: 'endYear', name: '结束年度', defaultValue:new Date().getFullYear(),component:{id:'year-picker',change:handleChangeEndYear}, colSpan: 4},
                       {id: 'type', name: '任务类型', colSpan: 4,defaultValue:'capacity_demarcate', component:{id:'meta-select',type:'batch-type',change:handleChangeType}},
                       {id:'batchType',name:'选择指标',defaultValue:'totalInvest',colSpan:4,component:{id:'data-select' ,data:this.projectTypeList,change:handleChangeBatchType}},]"
                  :append-buttons="[{text: '导出', type: 'primary', click:this.exportExcel},]"
                  :beforeDisplayList="loadChart"
                  :columns="analysisColumns"
                  show-index
                  page-size="-1"
    >
      <v-chart :key="'chart_'+timestamp" :style="{width:'100%',height:'400px'}" :option="analysisOption"></v-chart>
    </query-table>
  </div>
</template>
<script>
//单位 吨油利润对比
import DataSelect from "../../components/data-select";
import QueryTable from "../../components/query-table.vue";
const titleStyle =  {
  color: '#130e0e',//字体颜色
  fontStyle:'normal',//字体风格
  fontWeight:'bold',//字体粗细
  fontFamily:'sans-serif',//文字字体
  fontSize:18,//字体大小
  lineHeight:18,//字体行高
  align:'center',//'left' | 'right' ，文字水平对齐方式
  verticalAlign:'middle',//'top' | 'bottom' ，文字垂直对齐方式
};

const chartOption={
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  color: [
    '#30c0b4',
  ],
  legend: {top:10, },
  grid: {
    left: 0,
    right: 10,
    bottom: 0,
    containLabel: true
  },
  xAxis: {
    axisLabel: {interval: 0},
    type: 'category',
    data: []
  },
  yAxis: {
    type: 'value',
    // show:false,
    axisLabel: {
      show: true,
      interval: 'auto',
      formatter: '{value} '
    },
    show: true

  },
  series: [
    {
      type: 'bar',
      stack: 'Ad',
      label: {
        show: true,
        color:'white'
      },

      // yAxisIndex:0,
      //不同系列的柱间距离，为百分比,如果想要两个系列的柱子重叠，可以设置 barGap 为 '-100%'。
      data:[]
    },
  ]

};
export default {
  components: {QueryTable, DataSelect},
  $$route:{
    meta:{
      title:'趋势分析'
    }
  },
  name: "AnalysisTend",
  props: {
    pageHeight: {},
  },
  data() {
    return {
      analysisOption:JSON.parse(JSON.stringify(chartOption)),
      queryData:{},
      beginYear: new Date().getFullYear() -4,
      endYear: new Date().getFullYear() ,
      projectTypeList:[],
      timestamp:new Date().getTime(),
      officeMap:{},
      analysisColumns: [
        {id: 'year', name: '年度', type:'office'},
        { id: 'totalInvestSum', name: '建设投资', unit:'亿元',readonly :true,},
        { id: 'infWellCountSum', name: '基建井数', unit:'口',readonly :true,},
        { id: 'newCapacitySum', name: '新建产能',unit:'万吨',readonly: true,},
        { id: 'netProfitSum', name: '净利润',unit:'亿元',readonly: true,},
        { id: 'mTProductivityInvestSum', name: '百万吨产能',unit:'亿元',readonly: true,},
        { id: 'wellInvestSum', name: '单井投资',unit:'万元',readonly: true,},
        { id: 'wellEorSum', name: '单井EUR',unit:'吨',readonly: true,},
        { id: 'drillWellCountSum', name: '新钻井数',unit:'口',readonly: true,},
        {id: 'unitOperateCostDollarSum', name: '单位操作成本', unit: '美元/桶', readonly: true,},
        {id: 'unitTotalOperateCostDollarSum', name: '单位完全成本', unit: '美元/桶', readonly: true,}
      ],
      batchType:'totalInvest',
      batchTypeMap:{},
    }
  },
  watch: {
    $route(to, from) {},
  },
  created() {
    this.loadMetaList('project-type-analysis', (dataList) => {
      this.projectTypeList = dataList;
    });
    this.loadMetaNameMap('batch-type',(map)=>{
      this.batchTypeMap = map
    })
    setTimeout(()=>{
      this.handleChangeBatchType();
    },1000)

  },

  methods: {
    loadChart(dataList,batchType){
      if (!dataList) {
        return
      }
      let  targetOption =this.analysisOption
      if (!batchType) {
        batchType = 'totalInvest'
      }
      targetOption.xAxis.data=[];
      targetOption.series[0].data=[];
      if (!dataList || dataList.length == 0){
        return
      }

      for (let item of dataList) {

        let category = ''
        category = item.year;
        targetOption.xAxis.data.push(category);
        targetOption.series[0].data.push(item[batchType+'Sum']);
      }
      if (dataList.length<=6) {
        this.setBatWidth(targetOption.series,'20%')
      } else if(dataList.length<=4){
        this.setBatWidth(targetOption.series,'15%')
      } else if(dataList.length<=2){
        this.setBatWidth(targetOption.series,'15%')
      }
      if (dataList.length>=10) {
        this.setBatWidth(targetOption.series,'50%')
      }
      return targetOption

    },

    setBatWidth(seriesList, width) {
      for (let series of seriesList) {
        series.barWidth=width
      }
    },

    handleChangeBatchType(batchType) {
      if (!batchType) {
        batchType = 'totalInvest'
      }
      if(batchType=='millionTonProductivityInvest'){
        batchType = 'mTProductivityInvest';
      }
      let dataList = this.$refs['analysis'].getDataList();
      this.loadChart(dataList,batchType);
    },

    //处理年份变更,重新加载数据
    handleChangeBeginYear(year) {
      this.$refs['analysis'].updateQueryCondition('beginYear',year);
      this.$refs['analysis'].loadDataList();
      let dataList = this.$refs['analysis'].getDataList();
      this.loadChart(dataList,this.$refs['analysis'].getQueryData().batchType);
    },

    //处理年份变更,重新加载数据
    handleChangeEndYear(year) {
      this.$refs['analysis'].updateQueryCondition('endYear',year);
       this.$refs['analysis'].loadDataList();
      let dataList = this.$refs['analysis'].getDataList();
      this.loadChart(dataList,this.$refs['analysis'].getQueryData().batchType);
    },

    handleChangeType(type) {
      this.$refs['analysis'].updateQueryCondition('type',type);
      this.$refs['analysis'].loadDataList();
      let dataList = this.$refs['analysis'].getDataList();
      this.loadChart(dataList,this.$refs['analysis'].getQueryData().batchType);
    },
    exportExcel(){
      let queryData = this.$refs['analysis'].getQueryData();
      this.$refs['analysis'].exportExcel('analysis-tend',queryData.beginYear+'~'+queryData.endYear+this.batchTypeMap[queryData.type]+'任务趋势分析');
    }

  },
}
</script>